<template>
  <div class="rank_container" ref="rank">
    <scroll :data="TopList" v-show="TopList.length>0" class="scroll-list" ref="list">
      <div class="rank-wrapper">
        <div class="rank_list">
          <div
            class="list_item"
            v-for="(top,index) in TopList"
            :key="index"
            @click="selectToItem(top)"
          >
            <img :src="top.frontPicUrl" alt class="rank_item_img" />
            <span class="title_index" v-for="(item) in top.song" :key="item.topid">{{item.rank}}</span>
            <p
              class="title"
              v-for="(song,songIndex) in top.song"
              :key="songIndex"
            >{{song.title}}-{{song.singerName}}</p>
          </div>
        </div>
      </div>
      <div class="loading-container" v-show="!TopList.length">
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>
<script>
import { getRanks } from "@/api/rank";
import { ERR_OK } from "@/api/config";
import scroll from "../../base/scroll/scroll";
import loading from "@/base/loading/loading";
import { mapMutations } from "vuex";
import { playlistMixin } from "@/common/js/mixin";
export default {
  mixins: [playlistMixin],
  data() {
    return {
      TopList: [] //排行榜数据
    };
  },
  components: {
    scroll,
    loading
  },
  created() {
    this._initgetRnks();
  },
  methods: {
    //mixin
    handlePlaylist(playlist) {
      const bottom = playlist.length > 0 ? "60px" : "";
      this.$refs.rank.style.bottom = bottom;
      this.$refs.list.refresh();
    },
    //获取排行榜的数据
    _initgetRnks() {
      getRanks().then(res => {
        if (res.code === ERR_OK) {
          let TopList = res.topList.data.group;
          this._nomalrizeTopList(TopList);
        }
      });
    },
    //处理排行榜的数据
    _nomalrizeTopList(toplist) {
      toplist.forEach(topObj => {
        let topObjList = topObj.toplist;
        topObjList.forEach(listObj => {
          this.TopList.push(listObj);
        });
      });
    },
    //点击跳转到榜单的详情
    selectToItem(item) {
      this.$router.push({
        path: `/rank/${item.topId}`
      });
      this.setRankTopList(item);
    },
    ...mapMutations({
      setRankTopList: "SET_RANK_TOP_LIST_STATE"
    })
  }
};
</script>
<style lang="stylus"  rel="stylesheet/stylus">
@import '../../common/stylus/variable.styl';

.rank_container {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;
  padding 10px 20px
  background: $color-background;

  .rank_list {
    width: 100%;
  }

  .list_item {
    width: 100%;
    height: 100px;
    /* padding: 20px 0px 0px 20px */
    display: grid;
    grid-template-columns: 100px 30px auto;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: dense;
    align-items: center;
    font-size: $font-size-small;
    color: $color-text-d;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;

    /* justify-items : center */
    .rank_item_img {
      width: 100px;
      height: 100%;
      display: block;
      grid-row: 1 / 4;
      grid-column: 1 / 2;
    }

    .title_index {
      grid-column: 2 / 3;
      margin-left: 20px;
    }

    .title {
      grid-column: 3 / 4;
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .scroll-list {
    width: 100%;
    height: 100%;
    background: $color-background;
    overflow: hidden;
  }

  .loading-container {
    position: absolute;
    // width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
}
</style>
